<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="95px"
    label-position="left"
    class="pg-shaohuo-person-add-edit-franchisee">
    <el-dialog
      :title="`${type}加盟商`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
      <el-form-item 
        label="姓名"
        prop="realname"
        :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
        <el-input v-model="addEditForm.realname"></el-input>
      </el-form-item>
      
      <el-form-item 
        label="手机号"
        prop="phone"
        :rules="[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatorPhone, trigger: 'blur' }
        ]">
        <el-input v-model="addEditForm.phone"></el-input>
      </el-form-item>
      
      <el-form-item 
        :label="isEditing ? '新密码' : '密码'"
        prop="passwd"
        :rules="isEditing ? [
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ] : [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]">
        <el-input v-model="addEditForm.passwd"
          type="password"
          :placeholder="isEditing ? '仅在需要修改密码时输入' : ''"></el-input>
      </el-form-item>
      
      <el-form-item 
        v-if="!isEditing || addEditForm.passwd"
        label="确认密码"
        prop="checkPasswd"
        :rules="[
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validatorCheckPasswd, trigger: 'blur' }
        ]">
        <el-input v-model="addEditForm.checkPasswd"
          type="password"></el-input>
      </el-form-item>
      
      <el-form-item 
        label="状态"
        prop="status">
        <el-switch
          v-model="addEditForm.status"
          active-text="正常"
          inactive-text="禁用"></el-switch>
      </el-form-item>

      <el-form-item 
        v-for="(region, index) in addEditForm.regions"
        :key="index"
        :label="`管理区域${index ? NUMBER_LIST[index] : ''}`"
        :prop="'regions.' + index + '.value'"
        :rules="{ required: true, message: '请选择管理区域', trigger: 'blur' }">
        <area-cascader 
          :model="{ index }"
          :metaData="region.data"
          :reset="resetByToogle"
          limitLevel="city"
          :showAllLevels="true"
          @change="areaChange"></area-cascader>
        <el-button
          v-if="index !== 0"
          class="pg-shaohuo-person-add-edit-franchisee__delete"
          @click="deleteOption(index)"
          type="text" 
          icon="el-icon-delete"></el-button>
      </el-form-item>

      <!-- 添加按钮
      -------------------------- -->
      <el-button 
        @click="addOption"
        :disabled="addEditForm.regions.length >= NUMBER_LIST.length"
        type="text" icon="el-icon-plus">
        添加管理区域
      </el-button>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoFranchiseeService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { RegExService } from 'services/Util'
import { mapState } from 'vuex'
import AreaCascader from 'components/core/area-cascader'

export default {
  components: { AreaCascader },
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      NUMBER_LIST: [ '一', '二', '三', '四', '五', '六', '七', '八', '九', '十' ],
      addEditForm: {
        realname: '',
        phone: '',
        passwd: '',
        status: true,
        regions: [ { value: '' } ] // 类型名字
      },
      provinceList: null, // 省份列表
      cityList: null, // 城市列表
      hasAllProvinceList: false, // 是否已获取所有省份列表
      hasAllCityList: false, // 是否已获取所有城市列表

      resetByToogle: false
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 添加参数
    addFranchiserParam () {
      return {
        acc_id: this.acc_id,
        realname: this.addEditForm.realname,
        phone: this.addEditForm.phone,
        passwd: this.addEditForm.passwd,
        region_ids: [ ...new Set(this.addEditForm.regions.map(i => i.value)) ].join(','),
        status: this.addEditForm.status ? '0' : '1'
      }
    },
    // 修改参数
    alterFranchiserParam () {
      return {
        acc_id: this.acc_id,
        uid: this.editData.uid,
        realname: this.addEditForm.realname,
        phone: this.addEditForm.phone,
        passwd: this.addEditForm.passwd,
        region_ids: [ ...new Set(this.addEditForm.regions.map(i => i.value)) ].join(','),
        status: this.addEditForm.status ? '0' : '1'
      }
    }
  },
  methods: {
    // 手机号验证
    validatorPhone (rule, value, cb) {
      if (RegExService.phone(value)) {
        cb()
      } else {
        cb(new Error('请输入合法的手机号'))
      }
    },
    // 确认密码验证
    validatorCheckPasswd (rule, value, cb) {
      if (value === this.addEditForm.passwd) {
        cb()
      } else {
        cb(new Error('两次输入密码不一致'))
      }
    },
    areaChange (v) {
      console.log(v)
      const val = v.value[1].region_id
      const index = v.data.index
      if (this.addEditForm.regions.some(i => i.value === val)) this.$message.warning('该区域已选择')
      this.addEditForm.regions[index].value = val
    },
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.resetByToogle = !this.resetByToogle
      this.addEditForm = {
        realname: '',
        phone: '',
        passwd: '',
        checkPasswd: '',
        status: true,
        regions: [{ // 类型名字
          value: ''
        }]
      }
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.realname = v.realname || ''
      this.addEditForm.phone = v.phone || ''
      this.addEditForm.status = v.status === '正常'
      this.addEditForm.regions = v.regions.map(i => {
        return {
          value: i.region_id,
          data: {
            model: [ i.provinceid, i.region_id ],
            provinces: { data: i.provinces },
            cities: { data: i.cities, id: i.provinceid }
          }
        }
      })
      console.log(this.addEditForm.regions)
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 删除选项
    deleteOption (index) {
      this.addEditForm.regions.splice(index, 1)
    },
    // 添加选项
    addOption () {
      this.addEditForm.regions.push({ value: '' })
    },
    // 添加接口
    currentAddApi () {
      return ShaohuoFranchiseeService.addFranchiser(this.addFranchiserParam)
    },
    // 编辑接口
    currentEditApi () {
      return ShaohuoFranchiseeService.addFranchiser(this.alterFranchiserParam)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-add-edit-franchisee) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-cascader {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
  
  .el-switch__label {
    font-weight: normal;
    color: $--color-text-regular;
    &.is-active {
      color: $--color-primary;
    }
  }
}
</style>
